<template>
  <detail-dialog
    ref="detailDialog"
    :showChart="showChart"
    :dialogTitle="dialogTitle"
    :tableTitle="tableTitle"
    :tableLabel="tableLabel"
    :tableData="tableData"
    :selection="selection"
    :showExport="showExport"
    :page="page"
    :formData="formData"
    :formItem="formItem"
    @handleSizeChange="handleSizeChange"
    @handleCurrentChange="handleCurrentChange"
    @handleSearch="handleSearch"
    @handleExport="handleExportIOS"
  />
</template>

<script>
import DetailDialog from '@/components/DetailDialog'
import { iosDetail } from '@/api/chartDetail.js'
import Cookies from 'js-cookie'
import { exportExcel } from '@/utils/improtFile.js'
export default {
  props: {
  },
  data () {
    return {
      showChart: false,
      showExport: true,
      dialogTitle: 'IOS接口运行状态',
      tableTitle: 'IOS接口运行状态列表',
      tableLabel: [
        { label: '传输时间', param: 'time', align: 'center', minWidth: '10%', sortable: false, isShow: true },
        { label: '接口单位', param: 'btos', align: 'center', minWidth: '10%', sortable: false, isShow: true },
        { label: 'BTSO IP', param: 'btsoIp', align: 'center', minWidth: '10%', sortable: false, isShow: true },
        { label: 'configID', param: 'configId', align: 'center', minWidth: '13%', sortable: false, isShow: true },
        { label: 'moPath', param: 'moPath', align: 'center', minWidth: '13%', sortable: false, isShow: true },
        { label: '数据类型', param: 'type', align: 'center', minWidth: '8%', sortable: false, isShow: true },
        { label: '目标队列', param: 'destination', align: 'center', minWidth: '10%', sortable: false, isShow: true },
        { label: '传输状态', param: 'status', align: 'center', minWidth: '8%', sortable: false, isShow: true },
        { label: '描述', param: 'description', align: 'center', minWidth: '15%', sortable: false, isShow: true }
      ],
      tableData: [],
      selection: 'index',
      page: {
        pageNo: 1,
        pageSize: 14,
        total: 0
      },
      detailVal: {},
      searchParams: {},
      formData: {
        type: '',
        btsoIp: '',
        moPath: ''
      },
      level: '',
      formItem: [
        {type: 'input', label: '数据类型', name: 'type'},
        {type: 'input', label: 'BTSO IP', name: 'btsoIp'},
        {type: 'input', label: 'moPath', name: 'moPath'}
      ]
    }
  },
  components: {
    DetailDialog
  },
  methods: {
    init () {
      // 清空数据
      this.searchParams = {}
      for (let item in this.formData) {
        this.formData[item] = ''
      }
      this.getData()
      this.$refs.detailDialog.init()
    },
    // 获取数据
    getData () {
      let data = {
        words: JSON.stringify(this.searchParams),
        page: this.page.pageNo,
        limit: this.page.pageSize
      }
      iosDetail(data).then(res => {
        if (res.code === 200) {
          this.tableData = res.data.content
          this.page.total = parseInt(res.data.total)
        }
      })
    },
    // 查询
    handleSearch (data) {
      this.searchParams = {...data}
      this.getData()
    },
    // 数据列表导
    handleExportIOS () {
      let url = `/btos/es/iso/export`
      let data = {
        token: Cookies.get('token'),
        level: this.level,
        words: JSON.stringify(this.searchParams) !== '{}' ? JSON.stringify(this.searchParams) : ''
      }
      exportExcel(url, data).then(res => {})
    },
    // 每页数量改变
    handleSizeChange (val) {
      this.page.pageSize = val
      this.getData()
    },
    // 当前页码改变
    handleCurrentChange (val) {
      this.page.pageNo = val
      this.getData()
    }
  }
}
</script>
